<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.vue和jquery的区别
        // DOM操作不同 vue：Vue框架会自动把DOM元素进行更新。jquery：jQuery是使用选择器（） 选取DOM对象，对其进行赋值、取值 、事件绑定等操作
        // vue适用的场景：复杂数据操作的后台页面，表单填写页面
        // jquery适用的场景：一些html5的动画页面，一些需要js来操作页面样式的页面


        // 2.vuex页面刷新状态还能获取到吗
        // 页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，
        // 当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值
        // 直接将状态存入了缓存中，默认使用localStorage来固化数据


        // 3.post传递数据body体有哪些方式？
        // Post常见的请求体（body）有三种传输内容类型Content-type：application/x-www-form-urlencoded、
        // application/json、multipart/form-data
        // application/x-www-form-urlencoded：通过Postman可以看到Post请求的参数一般放在Body里。
        // 我们的application/x-www-form-urlencoded方式也是Post请求最早支持的一种数据传输方式，这种也是key和value形式，
        // 将我们的参数类似于GET方式那样拼接成一个字符串，例如：key1=value1&key2=value2，这种形式，然后将这个参数字符串进行urlencode编码，放到Body里进行发送请求数据



        //4. 图片传给后端转成base 64
        // 前端的图片转base64主要依靠canvas(画布)这个对象的toDataURL方法。

        // export const imageToBase64 = (img) => {
        //     var canvas = document.createElement("canvas"); //创建一个canvas对象
        //     //初始化
        //     canvas.width = img.width;
        //     canvas.height = img.height;

        //     //也是初始化，getContext("2d")这个方法表示创建一个2d的画布，详情可以看文档
        //     var ctx = canvas.getContext("2d");

        //     // 把我们创建的图片传入，画布创建完毕
        //     ctx.drawImage(img, 0, 0, img.width, img.height);
        //     var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();

        //     //我们要的base64就拿到了
        //     var dataURL = canvas.toDataURL("image/jpeg" + ext);
        //     return dataURL;
        // }


        // 5.了解nginx嘛,说说nginx它有什么作用？
        // nginx是反向代理软件, 它可以监听不同端口ip地址指向服务器里不同目录，达到同一个ip地址不同端口号访问不同网站目的。
        // 具体配置有   server {
        // listen 80; # 监听的端口
        // server_name 117.112.115.208; # 你的域名或ip

        //     location / {	# 访问路径配置
        // 	root / www / wwwroot / test; #服务器里对应的网站目录
        // 	try_files $uri $uri / /index.html; #此处可以配置history模式对应路径
        // 	index index.html index.htm; # 默认首页

        // }
        // nginx它还可以配置上线跨域
        // location / api / {    # 代理路径跟你项目里一致
        //     proxy_pass http://106.15.179.105/api;  #具体代理哪个跨域地址，相当于vue.config.js里devsever里的target
        // }


        // 6.前端打包缓存？
        // 强缓存和协商缓存
        // 两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效。
        // 协商缓存，就是需要和服务器进行协商，最终确定是否使用本地缓存。


        // 7.深拷贝和浅拷贝的区别  怎么实现?
        // 深拷贝拷贝的是值 浅拷贝拷贝的是地址
        // 浅拷贝： 将原对象的引用直接赋给新对象，新对象只是原对象的一个引用，而不复制对象本身，
        // 新旧对象还是共享同一块内存
        // 常见的浅拷贝方式: object.assign  slice concat 拓展运算

        // 深拷贝开辟⼀个新的栈，两个对象属完全相同，但是对应两个不同的地址，修改⼀个对象的属性，
        // 不会 改变另⼀个对象的属性
        // 递归实现深拷贝，判断是不是对象
        // 常见的深拷贝方式有： jQuery.extend() JSON.stringify() 手写循环递归 


        // 8.computed缓存是怎么实现的?
        // computed的计算属性有缓存机制，只有当其依赖的响应式数据发生变化时才会清空缓存重新计算结果，
        // 其缓存机制本质是通过一个dirty属性控制的，只有dirty为true时才会重新计算结果替换缓存。dirty只有
        // 当其响应式数据发送变化时才会设置为true，重新计算后会再次被设置为false


        // 9.v-for中为什么要用key
        // vue中列表循环需加:key=“唯一标识” 唯一标识尽量是item里面id等，
        // 因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 
        // key的作用主要是为了高效的更新虚拟DOM。


        // 10.重绘和回流？
        // 重绘
        // 简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，
        // 就会重新渲染页面，这就是重绘。
        // 回流
        // 当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，
        // 这就是回流。


        // 11.css3的动画？
        // 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
        // 指定至少这两个CSS3的动画属性绑定向一个选择器：
        // 规定动画的名称
        // 规定动画的时长

        // 12.FormData？
        // FormData 对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。
        // 其主要用于发送表单数据，但亦可用于发送带键数据 (keyed data)，而独立于表单使用。
        // 如果表单enctype属性设为 multipart/form-data，则会使用表单的submit()方法来发送数据，
        // 发送数据具有同样形式。
    </script>
</body>

</html>